<template>
  <div>
    <div>
      <el-form ref="employee" :model="employee" label-width="80px" class="loginForm">
        <el-form-item label="邮箱" >
          <el-input v-model="employee.email" style="width:200px;margin-right:20px"></el-input>
          <el-button type="primary" @click="sendEmail" :disabled="disabledEmail">{{msg}}</el-button>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="employee.password"></el-input>
        </el-form-item>
        
        <el-form-item style="text-align:center">
          <el-button type="primary" >登录</el-button>
          <el-button type="primary" >找回密码</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
        employee:{},
        disabledEmail:false,
        seconds:10,
        timer: null,
        msg: '发送验证码到邮箱',
    };
  },
  mounted(){
    
  },
  methods:{
    emailEnable(){
        this.seconds--;
        this.msg=this.seconds+"秒以后，重新发送邮件";
        if(this.seconds==0){
          clearInterval(this.timer);
          this.disabledEmail=false;
          this.msg='发送验证码到邮箱';
          this.seconds=10;
        }
    },
    sendEmail(){
        console.log("发送邮件")
        this.disabledEmail=true;
        this.msg=this.seconds+"秒以后，重新发送邮件";
        this.timer=setInterval(this.emailEnable, 1000);
    }
  }
}
</script>

<style>

</style>